<template>
  <div class="w-full content pb-50px" v-if="list.length > 0">
    <div class="w-full p-10px flex justify-end items-center">
      <div
        @click="handleOneKey"
        class="w-92px h-30px flex justify-center items-center bg-[#2E95FF] text-white text-14px rounded-10px"
      >
        一键上架
      </div>
    </div>
    <div class="pb-110px">
      <div
        class="pt-20px pl-20px pr-20px pb-20px bg-white mb-20px"
        v-for="(item, i) in list"
      >
        <div
          class="pb-10px border-b flex justify-between text-14px items-center"
        >
          <div class="text-[#999999]">订单号：{{ item.pp_order_no }}</div>
          <div class="text-[#F9363C]">待上架</div>
        </div>
        <div class="mt-10px flex justify-between w-full pb-10px border-b">
          <div>
            <van-image
              width="88px"
              height="78px"
              fit="contain"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </div>
          <div class="flex flex-col text-14px">
            <div class="mt-4px">{{ item.goods_name }}</div>
            <div class="mt-4px">{{ item.goods_no }}</div>
            <div class="mt-4px flex items-center">
              <div class="text-[#2E95FF]">{{ item.sell_name }}</div>
              <div
                class="ml-10px bg-[#F9363C] rounded-5px w-48px h-20px flex justify-center items-center text-white"
              >
                卖家
              </div>
            </div>
            <div class="mt-4px text-[#7C7C7C]">{{ item.sell_mobile }}</div>
            <div class="mt-4px flex items-center">
              <div class="text-[#2E95FF]">{{ item.buy_name }}</div>
              <div
                class="ml-10px bg-[#0CB031] rounded-5px w-48px h-20px flex justify-center items-center text-white"
              >
                买家
              </div>
            </div>
            <div class="mt-4px text-[#7C7C7C]">{{ item.buy_mobile }}</div>
          </div>
          <div class="text-[14px] text-[#F9363C]">
            <div>
              <div>价格：</div>
              <div class="mt-5px">¥{{ item.price }}</div>
            </div>
            <div class="mt-20px">
              <div>价格：</div>
              <div class="mt-5px">¥{{ item.price }}</div>
            </div>
          </div>
        </div>
        <div class="mt-10px text-14px">
          <div class="text-[#999999]">下单时间：{{ item.create_time }}</div>
          <div class="w-full flex justify-between items-center mt-7px">
            <div class="text-[#999999]" v-show="item.upper_time">
              更新时间：{{ item.upper_time }}
            </div>
            <div class="text-[#999999]">
              上架费：¥ <span class="text-[#F9363C]">{{ item.sj_price }}</span>
            </div>
          </div>
        </div>
        <div class="mt-20px flex justify-end items-center text-12px">
          <div
            @click="handleSj(item.id)"
            class="w-70px h-25px flex justify-center items-center bg-[#2E95FF] rounded-5px text-white ml-15px"
          >
            上架
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="mt-200px">
    <nodata></nodata>
  </div>
  <pagination
    @back="back"
    @next="next"
    :current_page="current_page"
    :last_page="last_page"
    :per_page="per_page"
    :total="total"
  ></pagination>
</template>
<script setup>
import pagination from "@/components/pagination.vue";
import getImageurl from "@/util/getImageurl";
import nodata from "@/components/nodata.vue";
import { showImagePreview, showToast } from "vant";
import { shopSjOrder, shopSjOrderDo, shopSjOrderAllDo } from "@/util/api";
const popupShow = ref(false);
const tabsList = ref([
  { name: "全部" },
  { name: "待付款" },
  { name: "待收款" },
  { name: "待上架" },
  { name: "已出售" },
]);
const current_page = ref(0);
const last_page = ref(0);
const per_page = ref(0);
const total = ref(0);
const list = ref([]);
const radioChecked = ref("0");
const active = ref("0");
const page = ref(1);
const getData = async () => {
  const res = await shopSjOrder({ page: page.value });
  current_page.value = res.msg.current_page;
  last_page.value = res.msg.last_page;
  per_page.value = res.msg.per_page;
  total.value = res.msg.total;
  list.value = res.msg.data;
  // console.log(res);
};
getData();
const handleItemChange = (v) => {
  if (v == 2) {
    //待收款
  }
  //  console.log(v);
};
const radioChange = (v) => {
  //  console.log(v);
  radioChecked.value = v;
};
const getImage = () => {
  showImagePreview({
    showIndex: false,
    images: ["https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"],
    className: "image",
  });
};
//上架
const handleSj = async (id) => {
  const res = await shopSjOrderDo({ id: id });
  showToast(res.msg);
  getData();
};
//一键上架
const handleOneKey = async () => {
  const res = await shopSjOrderAllDo();
  showToast(res.msg);
  getData();
};
const back = () => {
  page.value--;
  getData();
};
const next = () => {
  page.value++;
  getData();
};
</script>
<style scoped lang="scss">
:deep(.van-swipe__track) {
  width: 200px !important;
}
:deep(.van-swipe-item) {
  width: 200px !important;
}
:deep(.image) {
  vertical-align: bottom !important;
}
</style>
